<template>
    <el-select
        v-model="selectedValue"
        placeholder="请选择重点对象"
        @change="handleChange"
        :disabled="disabled"
        clearable
    >
        <el-option
            v-for="item in keyPersonManageList"
            :key="item.peopleId"
            :label="item.name"
            :value="item.peopleId"
        />
    </el-select>
</template>

<script setup>
// 重点对象列表数据
import {getKeyPersonManageSelectList} from "@/api/PlanManage/KeyPersonManage.js";

// 接收v-model传入的值
const props = defineProps({
    modelValue: [String, Number], // 定义modelValue类型，可以根据需求调整
    disabled: {                  // 接收父组件传入的 disabled 状态
        type: Boolean,
        default: false            // 默认不禁用
    }

})

// 触发父组件更新v-model
const emit = defineEmits(['update:modelValue'])

// 本地的选中的值
const selectedValue = ref(null);

// 监听下拉框变化并触发事件
const handleChange = (value) => {
    emit('update:modelValue', value)
}

const keyPersonManageList = ref({})

// 监听 modelValue 的变化，并在数据加载完成后赋值
watch(() => props.modelValue, (newValue) => {
    if (keyPersonManageList.value.length > 0) {
        selectedValue.value = newValue;
    }
});

// 监听数据加载情况，加载完成后再设置默认值
watch(keyPersonManageList, (newList) => {
    if (newList.length > 0 && props.modelValue) {
        selectedValue.value = props.modelValue;
    }
});

// 获取重点对象下拉数据
const getPeopleList = async () => {
    const res = await getKeyPersonManageSelectList()
    keyPersonManageList.value = res.rows
}

nextTick(() => {
    // 初始化获取数据
    getPeopleList()
})

</script>

<style scoped lang="scss">

</style>